import * as React from 'react'
import classNames from 'classnames'
import { Anim } from '../index'

import { ProgressProps, ProgressState } from './interface'

class Progress extends React.Component<ProgressProps, ProgressState> {
  static defaultProps = {
    prefixCls: 'layui-progress'
  }
  constructor(props: ProgressProps) {
    super(props)
    this.state = {}
  }

  render() {
    const {
      size, color, text,
      prefixCls, percent,
      ...restProps
    } = this.props

    const parentClasses = classNames(prefixCls, classNames, {
      [`${prefixCls}-${size}`]: size
    })
    const subClasses = classNames({
      [`${prefixCls}-bar`]: true,
      [`layui-bg-${color}`]: color
    })
    let subWidth = '0%'
    if (percent) {
      if (Number.isInteger(percent)) {
        subWidth = percent + '%'
      } else if (typeof percent === 'string' && percent.includes('%')) {
        subWidth = percent
      } else {
        subWidth = percent + 'px'
      }
    }

    return (
      <div className={parentClasses}>
        <Anim type="fadein">
          <div className={subClasses} style={{ width: subWidth }}>
            {text
              ? <span className={`${prefixCls}-text`}>{text}</span> : ''}
          </div>
        </Anim>
      </div>
    )
  }
}

export default Progress